<template>
    <h2>当前求和为{{ sum }}</h2>
    <h1>{{ person.name }}</h1>
    <h1>{{ person.msg }}</h1>
    <h1>{{ person.job.job1.salary }}</h1>
    <button @click="sum++">点我加一</button>
    <button @click="person.job.job1.salary++">点我加薪资</button>
    <button @click="person.msg += '!'">点我加msg</button>
    <button @click="person.name += '-'">点我加name</button>
</template>

<script>
import { reactive, ref, watch } from "vue";
export default {
    //#region
    // watch: {
    //     sum: {
    //         immediate: true,
    //         deep: true,
    //         handler(newValue, oldValue) {
    //             console.log(newValue, oldValue);
    //         },
    //     },
    // },
    //#endregion
    setup(props, context) {
        let person = reactive({
            name: "张三",
            msg: "dass",
            job: {
                job1: {
                    salary: 20,
                },
            },
        });
        let sum = ref(0);
        let msg = ref("你好");
        //普通watch
        // watch(sum, (nv, ov) => {
        //     console.log(nv, ov);
        // });

        //多个
        // watch([() => person.name, () => person.msg], (nv, ov) => {
        //     console.log(nv, ov);
        // });

        //监视一个reactive
        // watch(person, (nv, ov) => {
        //     console.log(nv, ov);
        // });
        //此时oldValue不奏效 deep也不起作用

        // 监视一个reactive里的对象
        watch(
            () => person.job,
            (nv, ov) => {
                console.log(nv, ov);
            },
            { deep: true }
        );
        //直接监视reactive里的对象要用deep
        return { sum, person };
    },
};
</script>                    
<style scoped>
</style>